<template>
  <div class="detail-page">
    <h2>详情页</h2>
    <!-- 商品卡片区域 -->
    <div class="product-cards">
      <!-- 渲染已有商品卡片 -->
      <div class="product-card" v-for="(product, index) in products" :key="index">
        <img :src="product.imageUrl" alt="Product">
        <p>{{ product.name }}</p>
        <p>价格: {{ product.price }}</p>
        <p>{{ product.description }}</p>
      </div>
      <!-- 带加号的卡片 -->
      <div class="product-card add-card" @click="showAddProductModal = true">
        <span>+</span>
        <p>增加商品</p>
      </div>
    </div>
    <!-- 评论区域 -->
    <div class="comments-section">
      <h3>评论</h3>
      <!-- 循环渲染评论列表 -->
      <div class="comment" v-for="(comment, index) in comments" :key="index">
        <p class="comment-author">{{ comment.author }}</p>
        <p class="comment-content">{{ comment.content }}</p>
      </div>
      <!-- 增加评论表单 -->
      <form @submit.prevent="addComment">
        <input v-model="newCommentAuthor" type="text" placeholder="你的名字">
        <textarea v-model="newCommentContent" placeholder="写下你的评论"></textarea>
        <button type="submit">提交评论</button>
      </form>
    </div>

    <!-- 增加商品模态框 -->
    <div v-if="showAddProductModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="showAddProductModal = false">&times;</span>
        <h3>增加商品详情</h3>
        <form @submit.prevent="addProductDetails">
          <input v-model="newProductName" type="text" placeholder="商品名称">
          <input v-model="newProductPrice" type="number" placeholder="商品价格">
          <input v-model="newProductDescription" type="text" placeholder="商品描述">
          <input v-model="newProductImageUrl" type="text" placeholder="商品图片链接">
          <button type="submit">添加商品</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制增加商品模态框的显示与隐藏
const showAddProductModal = ref(false);

// 新增商品信息
const newProductName = ref('');
const newProductPrice = ref('');
const newProductDescription = ref('');
const newProductImageUrl = ref('');

// 商品列表
const products = ref([
  { name: '商品 1', price: 100, description: '这是商品 1 的描述', imageUrl: '../assets/images/apple.jpg' },
  { name: '商品 2', price: 200, description: '这是商品 2 的描述', imageUrl: '../assets/images/apple.jpg' },
  { name: '商品 3', price: 300, description: '这是商品 3 的描述', imageUrl: '../assets/images/apple.jpg' },
  { name: '商品 4', price: 400, description: '这是商品 4 的描述', imageUrl: '../assets/images/apple.jpg' },
  { name: '商品 5', price: 500, description: '这是商品 5 的描述', imageUrl: '../assets/images/apple.jpg' },
  { name: '商品 6', price: 600, description: '这是商品 6 的描述', imageUrl: '../assets/images/apple.jpg' },
  { name: '商品 7', price: 700, description: '这是商品 7 的描述', imageUrl: '../assets/images/apple.jpg' },
]);

// 处理添加商品详情的方法
const addProductDetails = () => {
  if (newProductName.value && newProductPrice.value) {
    const newProduct = {
      name: newProductName.value,
      price: Number(newProductPrice.value), // 这里转换为 number 类型
      description: newProductDescription.value,
      imageUrl: newProductImageUrl.value
    };
    products.value.push(newProduct);
    showAddProductModal.value = false;
    newProductName.value = '';
    newProductPrice.value = '';
    newProductDescription.value = '';
    newProductImageUrl.value = '';
  }
};

// 评论相关数据
const newCommentAuthor = ref('');
const newCommentContent = ref('');
const comments = ref([
  { author: '范玉', content: '这是一条示例评论。' }
]);

// 增加评论的方法
const addComment = () => {
  if (newCommentAuthor.value && newCommentContent.value) {
    comments.value.push({
      author: newCommentAuthor.value,
      content: newCommentContent.value
    });
    newCommentAuthor.value = '';
    newCommentContent.value = '';
  }
};
</script>

<style scoped>
.detail-page {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.product-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.product-card {
  border: 1px solid #e9d8fd;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.product-card img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-bottom: 10px;
}

.add-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #f3e8ff;
}

.add-card span {
  font-size: 36px;
  color: #8a2be2;
}

.comments-section {
  border-top: 1px solid #e9d8fd;
  padding-top: 20px;
}

.comment {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #e9d8fd;
  border-radius: 10px;
}

.comment-author {
  font-weight: bold;
  margin-bottom: 5px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input,
textarea {
  padding: 10px;
  border: 1px solid #e9d8fd;
  border-radius: 10px;
}

button {
  width: auto;
  background: linear-gradient(135deg, #8a2be2 0%, #ff6b6b 100%);
  color: white;
  padding: 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}
</style>